<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Any Card</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <script src="https://fastly.jsdelivr.net/npm/p5@1/lib/p5.min.js"></script>
    <script src="https://p5play.org/v3/planck.min.js"></script>
    <script src="https://p5play.org/v3/p5play.js"></script>
    <!-- <script src="https://unpkg.com/p5.touchgui@0.5.2/lib/p5.touchgui.js"></script> -->
    <script src="component/sidebar/index.js"></script>
    <script src="./library/p5.sound.min.js"></script>
    <script src="./library/p5llm.js"></script>
    <script src="./library/tts.js"></script>
    <script src="sketch_vlm.js"></script>
    <!-- <script src="ali.js"></script> -->
    <link rel="stylesheet" href="component/sidebar/index.css" />
    <style>
      canvas {
        border: 1px solid rgba(0, 0, 0, 0.1);
        border-radius: 8px;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08);
        backdrop-filter: blur(8px);
        transition: all 0.3s ease;
      }

      .win-modal {
        position: absolute;
        background: rgba(255, 255, 255, 0.3);
        backdrop-filter: blur(2px);
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 1000;
      }

      .win-content {
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
      }

      .next-level-btn {
        padding: 15px 40px;
        font-size: 24px;
        background: #4caf50;
        color: white;
        border: none;
        border-radius: 8px;
        cursor: pointer;
        transition: all 0.3s ease;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        white-space: nowrap;
      }

      .next-level-btn:hover {
        background: #45a049;
        transform: translateY(-2px);
        box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15);
      }

      .corner-btn {
        position: absolute;
        top: 20px;
        right: 20px;
        padding: 10px 20px;
        background: #4caf50;
        color: white;
        border: none;
        border-radius: 4px;
        cursor: pointer;
        transition: all 0.3s ease;
        display: none; /* 默认隐藏 */
        z-index: 1000;
      }

      .corner-btn:hover {
        background: #45a049;
        transform: translateY(-2px);
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
      }
    </style>
  </head>
  <body>
    <div id="mySidebar" class="sidebar">
      <div class="sidebar-logo">菜单</div>
      <div class="sidebar-content">
        <ul>
          <li>
            <label for="voiceSelect">人声</label>
            <select id="voiceSelect">
              <option value="none">无</option>
              <option value="female">女声</option>
            </select>
          </li>
        </ul>
      </div>
    </div>

    <!-- 添加胜利模态层 -->
    <div id="winModal" class="win-modal" style="display: none">
      <div class="win-content">
        <button id="nextLevelBtn" class="next-level-btn">下一关</button>
      </div>
    </div>

    <button id="cornerBtn" class="corner-btn">按钮</button>
  </body>
  <script>
    window.sidebarInstance = new Sidebar();
  </script>
</html>
